<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EShopManager</title>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/lib/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/stylesheets/theme.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/lib/font-awesome/css/font-awesome.css" />
    <script src="${pageContext.request.contextPath}/static/lib/jquery-1.7.2.min.js" type="text/javascript"></script>

    <style type="text/css">
        #line-chart {
            height:300px;
            width:800px;
            margin: 0px auto;
            margin-top: 1em;
        }
        .brand { font-family: georgia, serif; }
        .brand .first {
            color: #ccc;
            font-style: italic;
        }
        .brand .second {
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>
<body>

<%--顶部--%>
<c:import url="top.jsp"></c:import>

<%--左部页面--%>
<c:import url="left.jsp"></c:import>


<!-- 内容区 -->
<div class="content">
    <div class="header">
        <h1 class="page-title">促销管理</h1>
    </div>

    <ul class="breadcrumb">
        <li><a href="adimg.jsp">促销管理</a> <span class="divider">/</span></li>
        <li class="active">首页轮播</li>
    </ul>

    <div class="container-fluid">

        <div class="row-fluid">

            <div class="block">
                <a href="#page-filter" class="block-heading" data-toggle="collapse">添加轮播图</a>
                <div id="page-filter" class="block-body collapse in">
                    <div class="search-well">
                        <form  class="form-inline" role="search"
                               action="#" method="post" id="uploadForm">
                            <input type="text" class="form-control" placeholder="请输入图书ID"
                                   name="book_id" value="${sessionScope.book_id}"/>
                            <input type="file" class="form-control" name="ad_img" placeholder="请上传轮播图片" />

                            <button class="btn btn-primary" id="btnSave">
                                <i class="icon-save"></i> 保存
                            </button>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="row-fluid">

            <div class="block">
                <p class="block-heading">轮播列表</p>
                <div class="block-body gallery">
                    <c:forEach items="${listImg}" var="info">
                        <img src="${pageContext.request.contextPath}/picUpload/${info.adImg}" width="300px" height="150px"  class="img-polaroid">
                        <a href="javascript:deleteClick(${info.adId})"><img src="${pageContext.request.contextPath}/static/images/no.gif" /></a>
                    </c:forEach>
                </div>
            </div>

        </div>


        <!-- 底部页面 -->

        <c:import url="footer.jsp"></c:import>

    </div>


</div>

<script src="${pageContext.request.contextPath }/static/lib/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/lib/tooltips.js"></script>
<script type="text/javascript">
    $("[rel=tooltip]").tooltip();
    $(function() {
        $('.demo-cancel-click').click(function() {
            return false;
        });

        $("#btnSave").click(function(){
            var book_id=$("input[name='book_id']").val();
            var ad_img=$("input[name='ad_img']").val();
            if (book_id=='') {
                show_err_msg("请输入书籍ID");
            }else if (ad_img=='') {
                show_err_msg("请上传轮播图片");
            }else{

                show_loading();
                uploadImg(book_id, ad_img);

            }

            return false;
        });

    });

    function deleteClick(ad_id) {
        if (confirm("你确定删除吗？")) {
            show_loading();
            var url="${pageContext.request.contextPath }/ad/deleteImgs";
            var data={
                ad_id:ad_id
            };

            $.post(url,data,function(response){
                // var jsonData=$.parseJSON(response);
                // var result=jsonData.status;

                var responseUrl="${pageContext.request.contextPath }//ad/rotation";
                if(response.isok){
                    show_msg('操作成功',responseUrl);
                }else{
                    show_err_msg('操作失败');
                }

            });
        }

    }

    function uploadImg(book_id,fileName){
        var headFile = fileName.substr(fileName.indexOf("."));
        if(headFile=='.jpg' || headFile=='.jpeg' || headFile=='.png'){
            //开始上传图片
            show_loading();
            var formData=new FormData();
            formData.append("ad_img", $("input[name='ad_img']")[0].files[0]);

            $.ajax({
                url: '${pageContext.request.contextPath}/PicLoadController/picloads',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function(res) {
                //console.log("res is" +res[0])
                if (res.length > 0) {
                    requestAddImg(book_id,res[0]);
                }else{
                    show_err_msg('上传图片失败');
                }
            }).fail(function(res) {
                show_err_msg('上传图片失败');
            });

        }else{
            show_err_msg('不支持该图片类型，请上传jpg、jpeg、png格式的图片');
        }

    }

    function requestAddImg(book_id,ad_img){
        //ajax请求servlet
        var url="${pageContext.request.contextPath }/ad/addImgs";
        var data={
            ad_img:ad_img,
            book_id:book_id

        };

        $.post(url,data,function(response){
            var responseUrl="${pageContext.request.contextPath }/ad/rotation";
            if(response.isok){
                show_msg('操作成功',responseUrl);
            }else{
                show_err_msg('操作失败');
            }

        });
    }

</script>

</body>
</html>
